<template>
  <div>
    <div class="content">
      <h1>欢迎加入豆瓣</h1>
      <!--<form>-->
        <div class="input" style="border-bottom: 0px">
          <input type="text" placeholder="手机号/邮箱" name="userid">
        </div>
        <div class="input pwd" style="border-bottom: 0px" name="password">
          <input :type="pwdtype?'password':'text'" minlength="6" placeholder="密码(最少6位)" value="1ah55lla51">
          <div class="show-pwd" @click="pwdShow()">
            <span class="show-pwd1"></span>
            <span class="show-pwd2" v-show="isShow"></span>
          </div>
        </div>
        <div class="input">
          <input type="text" placeholder="昵称" name="nickname">
        </div>
        <button :type="regtype" @click="isRegister()">{{register}}</button>
        <p>点击「立即注册」代表你已阅读并同意<a href="#">用户使用协议</a></p>
      <!--</form>-->
      <div class="down"><a href="/">下载豆瓣App</a></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'MusicView',
    data() {
      return {
        regtype: 'submit',
        register: '立即注册',
        isShow: false,
        pwdtype: 'true'
      }
    },
    methods: {
      isRegister() {
        this.register = '正在提交...'
        document.querySelector('button').setAttribute('style', 'background:#aaa')
      },
      pwdShow() {
        this.isShow = !this.isShow
        this.pwdtype = !this.pwdtype
      }
    }
  }
</script>

<style lang="scss" scoped>
  .content {
    padding: 25px;
    h1 {
      text-align: center;
      color: #42bd56;
      font-size: 40px;
      margin: 10% 0 9%;
      font-weight: 300;
      font-weight: 300;
    }
    .input {
      padding: 0 10px;
      color: #494949;
      height: 44px;
      background: #fff;
      border: 1px solid #d7d7d7;
      overflow: hidden;
      input {
        font-size: 16px;
        border: 0 none;
        width: 96%;
        background: #fff;
        height: 30px;
        line-height: 30px;
        margin-top: 7px;
        outline: 0;
        -webkit-appearance: none;
        &::-webkit-input-placeholder {
          color: #c7c7c7;
        }
      }
    }
    button {
      outline: none;
      margin-top: 15px;
      font-size: 16px;
      border-radius: 3px;
      border: 0 none;
      background: #42bd56;
      display: block;
      width: 100%;
      height: 44px;
      color: #fff;
      -webkit-user-select: none;
      -webkit-transition: all 0.3s ease-out;
      transition: all 0.3s ease-out;
    }
    p {
      text-align: center;
      margin-top: 20px;
      font-size: 14px;
      color: #494949;
      a {
        text-decoration: underline;
        color: #494949;
      }
    }
    .down {
      margin-top: 40px;
      width: 100%;
      text-align: center;
      a {
        font-size: 15px;
        color: #42bd56;
      }
    }
    .pwd {
      position: relative;
      .show-pwd1 {
        position: absolute;
        right: 2px;
        top: 0;
        display: block;
        height: 100%;
        width: 32px;
        background: url() no-repeat center center;
        background-size: 18px;
        z-index: 3;
      }
      .show-pwd2 {
        position: absolute;
        right: 2px;
        top: 0;
        display: block;
        height: 100%;
        width: 32px;
        background: url() no-repeat center center;
        background-size: 18px;
        z-index: 3;
      }
    }
  }
</style>
